<template>
	<view class="invoice">
		<u-sticky bgColor="#fff">
			<view style="padding: 10rpx 0;">
				<u-tabs :list="list1" lineColor="#FD8F19" lineWidth="80rpx" :current="current1" :scrollable="false" :is-scroll="false" @change="change"></u-tabs>
			</view>
		</u-sticky>
		<view v-show="current1 == 0" style="background-color: #F7F7F7;">
			<view class="invoice-history">
				<view class="uninvoicedList" v-for="(item,index) in data" :key="index">
					<view class="title" style="margin-bottom: 24rpx;">
						<text style="margin-left: 76rpx;">订单号：{{item.a}}</text>
						<text>{{item.date}}</text>
					</view>
					<view style="display: flex;align-items: center;">
						<!-- <view class="icon">
							<selector v-model="val"></selector>
						</view> -->
						<u-radio 
							v-model="index"
							change="radioChange"
									>
									</u-radio>
						<scroll-view scroll-x="true" class="scroll-x" v-if="item.total > 1">
							<view>
								<view class="list">
									<view class="list-scroll" v-for="(item1,index) in item.listData" :key="index">
										<image :src="item1.url" mode="aspectFill"></image>
										<!-- <view class="text">{{item.text}}</view> -->
									</view>
								</view>
							</view>
						</scroll-view>
						<view style="display: contents;" v-else>
							<image style="width: 140rpx;height: 140rpx;border-radius: 30rpx;" :src="item.listData[0].url" mode="aspectFill"></image>
							<view style="margin-left:24rpx;width: 280rpx;">{{item.listData[0].text}}</view>
						</view>
						<view style="margin-left: 20rpx;font-size: 24rpx;">
							<text>共{{item.total}}件</text>
						</view>
					</view>
					<view class="title" style="margin-top: 40rpx;">
						<view></view>
						<view>实付款：<text style="color: #FD8F19;">￥<text style="font-size: 36rpx;">{{item.money}}</text></text></view>
					</view>
				</view>
			</view>
			<!-- <view class="invoice-history">
				<view class="uninvoicedList">
					<view class="title" style="margin-bottom: 24rpx;">
						<text style="margin-left: 76rpx;">订单号：55499844654</text>
						<text>2018-08-01</text>
					</view>
					<view style="display: flex;align-items: center;">
						<view class="icon">
							<selector v-model="val"></selector>
						</view>
						<view style="display: contents;">
							<image style="width: 140rpx;height: 140rpx;border-radius: 30rpx;" src="https://cdn.uviewui.com/uview/swiper/swiper3.png" mode="aspectFill"></image>
							<view style="margin: 0 54rpx 0 24rpx;">总台文创央视<br/>CCTV2023兔年生…</view>
						</view>
						<view style="margin-left: 20rpx;font-size: 24rpx;">
							<text>共4件</text>
						</view>
					</view>
					<view class="title" style="margin-top: 40rpx;">
						<view></view>
						<view>实付款：<text style="color: #FD8F19;">￥<text style="font-size: 36rpx;">141.20</text></text></view>
					</view>
				</view>
			</view> -->
			<view class="fixedBottom">
				<view style="margin-bottom: 32rpx;">
					已选择<text class="colour">1</text>个订单，共<text class="colour">341.20</text>元
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<text class="icon" style="display: inline-block;margin: 0;">
							<selector v-model="val" @click="click1"></selector>
						</text>
						<view style="margin-left: 8rpx;">本页全选</view>
					</view>
					<view class="invoicing">开具发票</view>
				</view>
			</view>
		</view>
		<view v-show="current1 == 1">
			<view class="invoice-history">
				<view class="list-item" @click="handleClick">
					<view class="title">
						<text>2018-08-01</text>
						<view style="display: flex;align-items: center;">
							<text style="margin-right: 12rpx;">已开票</text>
							<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
						</view>
					</view>
					<view class="content">
						<view class="tips">
							<text>总台文创</text>
							<view class="tips-invoice">电子发票</view>
						</view>
						<view class="price">
							<text style="font-size: 28rpx;">￥</text>
							<text>341.20</text>
						</view>
					</view>
				</view>
				<view class="list-item" @click="handleClick">
					<view class="title">
						<text>2018-08-01</text>
						<view style="display: flex;align-items: center;">
							<text style="margin-right: 12rpx;" class="color1">开票中</text>
							<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
						</view>
					</view>
					<view class="content">
						<view class="tips">
							<text>总台文创</text>
							<view class="tips-invoice">电子发票</view>
						</view>
						<view class="price">
							<text style="font-size: 28rpx;">￥</text>
							<text>341.20</text>
						</view>
					</view>
				</view>
				<view class="list-item" @click="handleClick">
					<view class="title">
						<text>2018-08-01</text>
						<view style="display: flex;align-items: center;">
							<text style="margin-right: 12rpx;">已作废</text>
							<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
						</view>
					</view>
					<view class="content">
						<view class="tips">
							<text>总台文创</text>
							<view class="tips-invoice">电子发票</view>
						</view>
						<view class="price">
							<text style="font-size: 28rpx;">￥</text>
							<text>341.20</text>
						</view>
					</view>
				</view>
				<view class="list-item" @click="handleClick">
					<view class="title">
						<text>2018-08-01</text>
						<view style="display: flex;align-items: center;">
							<text style="margin-right: 12rpx;" class="color3">开票失败</text>
							<u-icon name="arrow-right" color="#878787" size="14"></u-icon>
						</view>
					</view>
					<view class="content">
						<view class="tips">
							<text>总台文创</text>
							<view class="tips-invoice">电子发票</view>
						</view>
						<view class="price">
							<text style="font-size: 28rpx;">￥</text>
							<text>341.20</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="row1">
			<view class="title">
				<text>选择类型</text>
				<text style="margin-left: 12rpx;">开具发票</text>
			</view>
			<view class="tabbar">
				<view class="tabbar-item" v-for="(item,index) in tabbar1" :key="index">
					<image :src="item.value" class="tabbar-image" mode="aspectFill"></image>
					<text>{{item.label}}</text>
				</view>

			</view>
		</view> -->

		<!-- <view class="row2">
			<view class="title">
				<text>发票服务</text>
			</view>
			<view class="tabbar">
				<view class="tabbar-item" v-for="(item,index) in tabbar2" :key="index" @click="handleTab1Click(item)">
					<image :src="item.value" class="tabbar-image" mode="aspectFill"></image>
					<text>{{item.label}}</text>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list1: [{
					name: '未开发票',
				}, {
					name: '已开发票',
				}],
				current1: 0,
				val: false,
				data: [{
					a: '55499844654',
					date: '2018-08-01',
					listData: [{
							url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
							text: "测试商品名字商品名字商品名字商品名字"
						},
						{
							url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
							text: "测试商品名字商品名字商品名字商品名字"
						},
						{
							url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
							text: "测试商品名字商品名字商品名字商品名字"
						},
						{
							url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
							text: "测试商品名字商品名字商品名字商品名字"
						}
					],
					total: 4,
					money: '141.20'
				}, {
					a: '55490000654',
					date: '2023-08-01',
					listData: [{
							url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",
							text: "总台文创央视CCTV2023兔年生…"
						}
					],
					total: 1,
					money: '14.20'
				}],
				current: 0
				// name:"Invoice",
				// tabbar1: [{
				// 		label: "福礼商城",
				// 		value: "",
				// 		status: 1
				// 	},
				// 	{
				// 		label: "文创产品",
				// 		value: "",
				// 		status: 2
				// 	},
				// 	{
				// 		label: "充值",
				// 		value: "",
				// 		status: 3
				// 	}
				// ],
				// tabbar2: [{
				// 	label: "开票历史",
				// 	value: "",
				// 	status: 1
				// }, {
				// 	label: "发票抬头管理",
				// 	value: "",
				// 	status: 2
				// }, {
				// 	label: "发票说明",
				// 	value: "",
				// 	status: 3
				// }, ]
			}
		},
		methods:{
			change(e) {
				console.log(e, 'index')
				this.current1 = e.index;
			},
			handleTab1Click(options){
				if(options.status == 1){
					uni.navigateTo({
						url:"/myPages/invoice/history"
					})
				}
				
				if(options.status == 2){
					
				}
				
				if(options.status == 3){
					uni.navigateTo({
						url:"/myPages/invoice/illustrate"
					})
				}
			},
			handleClick() {},
			click1(e) {
				console.log(this.val, e, '1111')
			},
			radioChange(e) {
				// console.log(e);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.invoice {
		position: relative;
		// padding-top: 32rpx;

		// .row1,
		// .row2 {
		// 	margin: 0 auto;
		// 	width: 686rpx;
		// 	height: 263rpx;
		// 	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		// 	box-shadow: 0rpx 12rpx 15rpx 0rpx rgba(0, 0, 0, 0.03);
		// 	border-radius: 30rpx;
		// 	box-sizing: border-box;
		// 	padding: 32rpx 24rpx 0 24rpx;

		// 	.tabbar {
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-between;
		// 		box-sizing: border-box;
		// 		padding: 0 30rpx;

		// 		.tabbar-item {
		// 			display: flex;
		// 			flex-direction: column;
		// 			align-items: center;
		// 			font-size: 24rpx;

		// 			.tabbar-image {
		// 				width: 80rpx;
		// 				height: 80rpx;
		// 				margin-bottom: 12rpx;
		// 			}
		// 		}
		// 	}

		// 	.title {
		// 		margin-bottom: 32rpx;
		// 		color: #1F1F1F;
		// 		font-weight: bold;
		// 	}
		// }

		// .row2 {
		// 	width: 686rpx;
		// 	height: 239rpx;
		// 	background: #FFFFFF;
		// 	border-radius: 30rpx;
		// 	margin-top: 24rpx;

		// 	.tabbar {

		// 		.tabbar-item {
		// 			.tabbar-image {
		// 				width: 56rpx;
		// 				height: 56rpx;
		// 				margin-bottom: 12rpx;
		// 			}
		// 		}
		// 	}
		// }

		// &::after {
		// 	content: "";
		// 	position: absolute;
		// 	left: 0;
		// 	top: 0;
		// 	right: 0;
		// 	height: 423rpx;
		// 	background: linear-gradient(180deg, #FFEEDC 0%, rgba(255, 238, 220, 0) 100%);
		// 	z-index: -1;
		// }
	}
	page {
		background-color: #F7F7F7;
	}
	.color1{
		color:#FD8F19 !important;
	}
	.color2{
		color: #FF575E !important;
	}
	.color3 {
		color: #FF575E !important;
	}
	.invoice-history {
		// background-color: #F7F7F7;
		margin-bottom: 24rpx;
		.list-item {
			margin: 0 auto;
			margin: 24rpx 32rpx 0;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 32rpx 32rpx 19rpx;
			.content {
				display: flex;
				justify-content: space-between;
				color: #1F1F1F;
				margin-top: 24rpx;
				.price {
					font-weight: bold;
					font-size: 36rpx;
				}
				.tips {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					.tips-invoice {
						line-height: 33rpx;
						border-radius: 3rpx;
						padding: 3rpx 6rpx 2rpx;
						margin-left: 12rpx;
						border: 1rpx solid #C1C1C1;
						color: #878787;
						font-size: 24rpx;
					}
				}
			}
			.title {
				display: flex;
				justify-content: space-between;
				color: #878787;
				font-size: 28rpx;
			}
		}
		.uninvoicedList {
			margin: 0 32rpx 0;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 32rpx;
			.title {
				display: flex;
				justify-content: space-between;
			}
			.icon {
				width: 34rpx;
				height: 34rpx;
				border: 2rpx solid #C1C1C1;
				border-radius: 50%;
				margin-right: 32rpx;
			}
			.scroll-x {
				width: 70%;
			}
			.list {
				display: flex;
				// margin-top: 24rpx;
			
				.list-scroll {
					margin-right: 12rpx;
			
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
					}
			
					.text {
						margin-top: 12rpx;
						color: rgba(31, 31, 31, 1);
						font-size: 24rpx;
						width: 100%;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
		
	}
	.fixedBottom {
		position: fixed;
		bottom: 0;
		padding: 24rpx 64rpx 70rpx;
		color: #878787;
		font-size: 24rpx;
		width: 100%;
		box-sizing: border-box;
		.colour {
			color: #1F1F1F;
		}
		.icon {
			width: 34rpx;
			height: 34rpx;
			border: 2rpx solid #C1C1C1;
			border-radius: 50%;
			margin-right: 32rpx;
		}
		.invoicing {
			padding: 19rpx 53rpx;
			background-color: #FD8F19;
			color: #fff;
			border-radius: 40rpx;
		}
	}
</style>
